<template>
  <el-header class="header">
    <i
      @click="close"
      :class="isCollapse == true ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
      class="cursor"
    ></i>
    <div class="header_bread"><Breadcrumb /></div>
    <div class="header_box">
      <div class="header_img">
        {{ $store.state.username.slice(0, 1).toUpperCase() }}
      </div>
      <span>欢迎:{{ $store.state.username }}</span>
      <el-tooltip class="item" effect="dark" content="全屏" placement="bottom">
        <!-- <i class="el-icon-full-screen cursor" @click="screen"></i> -->
        <i class="el-icon-full-screen cursor" @click="clickFullscreen"></i>
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="注销" placement="bottom">
        <i class="el-icon-switch-button cursor" @click="loginOut"></i>
      </el-tooltip>
    </div>
  </el-header>
</template>

<script>
// 引入全屏插件
import screenfull from "screenfull";
import Breadcrumb from "@/components/Breadcrumb.vue";
export default {
  components: { Breadcrumb },
  name: "Header",
  data() {
    return {
      // nav 展开隐藏
      isCollapse: false,
      fullscreen: false,
    };
  },
  methods: {
    loginOut() {
      this.$confirm("此操作将退出系统, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          localStorage.clear();
          this.$store.commit("RESVUEX");
          this.$router.replace("/login");
          // location.reload();
          // console.log('out',this.$router);
          this.$message({
            type: "success",
            message: "退出成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消退出!",
          });
        });
    },
    close() {
      console.log(11);
      this.isCollapse = !this.isCollapse;
      this.$bus.$emit("getFold", this.isCollapse);
    },
    // 全屏 js
    /* screen() {
      let element = document.documentElement;

      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          // IE11

          element.msRequestFullscreen();
        }
      }
      this.fullscreen = !this.fullscreen;
    }, */
    // 全屏 插件
    clickFullscreen() {
      if (!screenfull.isEnabled) {
        this.$message({
          message: "浏览器不支持",
          type: "warning",
        });
        return false;
      }
      // .toggle() 切换全屏
      screenfull.toggle();
      this.fullscreen = true;
    },
    checkFull() {
      var isFull =
        document.fullscreenEnabled ||
        window.fullScreen ||
        document.webkitIsFullScreen ||
        document.msFullscreenEnabled;
      // to fix : false || undefined == undefined
      if (isFull === undefined) {
        isFull = false;
      }
      return isFull;
    },
  },
  mounted() {
    window.onresize = () => {
      // 全屏下监控是否按键了ESC
      if (!this.checkFull()) {
        // 全屏下按键esc后要执行的动作
        this.fullscreen = false;
      }
    };
  },
};
</script>

<style scoped>
.header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.header_bread {
  margin-left: 10px;
  flex: 1;
}
.header_box {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.header_box i {
  margin-left: 20px;
}
.header_img {
  width: 40px;
  height: 40px;
  margin-right: 10px;
  border-radius: 20%;
  background-color: #304156;
  color: #fff;
  font-size: 30px;
  text-align: center;
  line-height: 40px;
}
.cursor {
  cursor: pointer;
  font-size: 20px;
}
</style>
